/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable no-param-reassign */
/* eslint-disable import/no-cycle */
import { Button, Space, Form, Tabs } from 'antd';
import React from 'react';
import BaseContainerControl from './BaseContainerControl';
import ControlUtil from './ControlUtil';

const { TabPane } = Tabs;
/**
 * flex 容器控件
 */
class FlexContainerControl extends BaseContainerControl {
  static create(props, dataProps, extProps) {
    return new FlexContainerControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '栅栏容器',
      type: 'FlexContainer',
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '栅栏容器';

    // this.icon = '';
  }

  quickLayout(parentForm, line) {
    const pecent = Number(100.0 / line).toFixed(1);
    this.data.childControls.forEach((c) => {
      c.data.widthPercent = pecent;
    });
    parentForm.refreash();
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <TabPane tab="控件配置" key="3">
        <Form.Item label="快速布局">
          <Space>
            <Button
              type="link"
              onClick={() => {
                this.quickLayout(parentForm, 1);
              }}
            >
              一行1列
            </Button>
            <Button
              type="link"
              onClick={() => {
                this.quickLayout(parentForm, 2);
              }}
            >
              一行2列
            </Button>
            <Button
              type="link"
              onClick={() => {
                this.quickLayout(parentForm, 3);
              }}
            >
              一行3列
            </Button>
            <Button
              type="link"
              onClick={() => {
                this.quickLayout(parentForm, 4);
              }}
            >
              一行4列
            </Button>
          </Space>
        </Form.Item>
      </TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <div style={{ padding: 5 }} className="ant-form-inline" {...this.extProps}>
        {ControlUtil.controlsRender(this.data.childControls, parentForm)}
      </div>
    );
  }
}

export default FlexContainerControl;
